<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-button plain @click="addhouse">新增房型</el-button>
        <el-button plain>批量删除</el-button>
      </el-col>
      <el-col :span="12">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="formInline.userName"
              placeholder="房型名称"
              suffix-icon="el-icon-search"
              @click="onSubmit"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="housetypelist"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="房型名称"> </el-table-column>
      <el-table-column prop="name" label="门市价(元)"> </el-table-column>
      <el-table-column prop="name" label="押金(元)"> </el-table-column>
      <el-table-column prop="name" label="房间数量"> </el-table-column>
      <el-table-column prop="name" label="排序"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button type="text" @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增房型" :visible.sync="dialogFormVisibleaddhouse">
      <AddHouseType
        ref="AddHouseType"
        @savehousetype="savehousetype"
        :key="new Date().getTime()"
      ></AddHouseType>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddHouseType from "./AddHouseType.vue";
import { gethousetypelist } from "@/api/housetype";
export default {
  name: "VueElementAdminFixInstallProblemHouseTypeList",
  components: {
    AddHouseType,
  },
  data() {
    return {
      formInline: {
        userName: "",
      },
      dialogFormVisibleaddhouse: false,
      housetypelist: [],
    };
  },

  mounted() {
    //页面加载时启动
    this.tohousetype();
  },

  methods: {
    //显示房型
    tohousetype() {
      gethousetypelist().then((res) => {
        this.housetypelist = res.data;
      });
    },
    //新增房型
    addhouse() {
      this.dialogFormVisibleaddhouse = true;
    },
    savehousetype() {
      this.dialogFormVisibleaddhouse = false;
      this.tohousetype();
    },
    Save() {
      this.$refs.AddHouseType.saveHouse();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>